<template>
  <view class="detailPage">
    <!-- 标题 -->
    <shopro-navbar
      back-icon-color="#020202"
      :background="{ background: '#fff' }"
      @backHandler="goBack"
      :backTextStyle="{
        color: '#020202',
        fontSize: '36rpx',
        fontWeight: '400',
      }"
      :isBack="true">
      <view slot="content" class="u-flex nav-wrap">
        <view class="nav-item">详情</view>
      </view>
    </shopro-navbar>
    <view class="card">
      <view class="cardTop">
        <image class="imgs" :src="detajs.image" mode="aspectFill"></image>
        <view style="width: 75%;">
          <view class="cardright">
            <view class="name">{{ detajs.name }}</view>
            <view class="borline"></view>
            <view class="jobs">{{ detajs.job }}</view>
          </view>

          <view class="become" v-if="detajs.is_jingji == '1'">
            已成为经纪人
            <text class="small">（已有{{ detajs.num }}人）</text>
          </view>
          <view
            class="become"
            style="width: 88%;"
            @click="getvipList"
            v-if="detajs.is_jingji == '0'">
	          申请成为他的经纪人
            <text class="small">（已有{{ detajs.num }}人）</text>
          </view>
        </view>
      </view>
	    <u-parse class="introduce" :html="detajs.desc"></u-parse>
    </view>
    <!-- 经纪人 -->
    <view class="activityYg" v-if="jingji_list.length > 0">
      <view class="classificationTitle">
        <view class="flex">
          <view class="leftline"></view>
          经纪人团队信息
        </view>
      </view>
      <!-- 内容 -->
      <view class="photoList">
        <view
          class="photoView"
          v-for="(item, index) in jingji_list"
          :key="index">
          <image class="photoImg" :src="item.avatar" mode="aspectFill"></image>
          <text class="photoName">{{ item.nickname }}</text>
        </view>
      </view>
    </view>
    <!-- 活动预告 -->
    <view class="activityYg" v-if="activeList.length > 0">
      <view class="classificationTitle">
        <view class="flex">
          <view class="leftline"></view>
          活动预告
        </view>
        <view class="more" @click="goMore('2')">
          更多
          <image
            class="imgs"
            src="/static/images/finance/more.png"
            mode="widthFix"></image>
        </view>
      </view>
      <!-- 内容 -->
      <view
        class="moreList"
        v-for="(item, index) in activeList"
        :key="index"
        @click="handleActive(item)">
        <image class="imgs" :src="item.image" mode="aspectFill"></image>
        <view class="moreRight">
          <view class="moreRightTop">
            <text class="name">{{ item.title }}</text>
          </view>
<!--	        <text class="time">{{ item.time_text }}</text>-->
          <view class="u-ellipsis-2" v-html="item.project_content"></view>
        </view>
      </view>
    </view>
    <!-- 分类 -->
    <view class="classification">
      <view class="classificationTitle">
        <view class="leftline"></view>
        课程分类
      </view>
      <u-tabs
        :list="list"
        :is-scroll="true"
        :current="current"
        @change="change"
        inactive-color="#666666"
        active-color="#000"
        class="tab"
        :bar-style="{ background: '#ED861F' }"></u-tabs>
      <view class="financeTitle">
        <text>精品课程</text>
        <!-- <view class="more" @click="goMore('1')">
          更多
          <image
            class="imgs"
            src="/static/images/finance/more.png"
            mode="widthFix"></image>
        </view> -->
      </view>
    </view>
    <view class="moreContent">
      <view class="empty" v-if="coursedata.length == 0">
        <u-empty text="暂无数据" mode="list"></u-empty>
      </view>
      <view
        class="moreList"
        v-for="(item, index) in coursedata"
        :key="index"
        @click="handleDetail(item)">
        <image class="imgs" :src="item.cover"></image>
        <view class="moreRight">
          <view class="name">
            {{ item.title }}
            <view class="nameright" v-if="item.is_buy == 1">
              <image
                v-if="item.is_fav == 1"
                class="shoucang"
                @click="getStatus(item.id)"
                src="/static/images/finance/shoucang.png"
                mode="widthFix"></image>
              <image
                v-if="item.is_fav == 0"
                class="shoucang"
                @click="getStatus(item.id)"
                src="/static/images/finance/quxiaoshoucang.png"
                mode="widthFix"></image>

              已购买
            </view>
            <view class="nameright" v-if="item.is_buy == 0">
              <image
                v-if="item.is_fav == 1"
                class="shoucang"
                @click="getStatus(item.id)"
                src="/static/images/finance/shoucang.png"
                mode="widthFix"></image>
              <image
                v-if="item.is_fav == 0"
                class="shoucang"
                @click="getStatus(item.id)"
                src="/static/images/finance/quxiaoshoucang.png"
                mode="widthFix"></image>
              <image
                class="suo"
                src="/static/images/finance/suo.png"
                mode="widthFix"></image>
            </view>
          </view>
          <view class="hite" v-html="item.content"></view>
        </view>
      </view>
    </view>
    <!-- 成为会员 -->
    <u-mask :show="show">
      <view class="maskbox">
        <view class="titlebox">
          <view class="masktitle">成为会员</view>
          <image
            class="close"
            @click="show = false"
            src="/static/images/finance/close.png"
            mode="widthFix"></image>
        </view>
        <view class="daili" v-for="(item, index) in vipData" :key="index">
          <view>{{ item.name }}</view>
          <view class="dalibottom">
            <view
              v-for="(v, i) in item.viplist"
              :key="i"
              class="smalldl"
              :class="currId == v.id ? 'activebr' : ''"
              @click="gocome(v.id, v)">
              <view>{{ v.name }}</view>
              {{ v.price }}元/年
            </view>
          </view>
        </view>

        <view class="sure" @click="submit">确定</view>
      </view>
    </u-mask>
    <shopro-auth-modal v-if="authType"></shopro-auth-modal>
  </view>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      title: "",
      list: [
        {
          name: "金融课",
        },
        {
          name: "文化课",
        },
      ],
      current: 0,
      collect: true,
      show: false,
      currId: 0,
      detajs: {},
      cate_id: "",
      id: "",
      coursedata: [],
      vipData: [],
      selectval: "",
      jingji_list: [],
      activeList: [],
    };
  },
  props: {},
  onLoad(options) {
    this.id = options.val;
    this.getDetail(options.val);
  },
  computed: {
    ...mapGetters(["isLogin", "authType"]),
  },
  created() {},
  onShow() {
    var that = this;
    uni.$on("updateData", function (data) {
      if (data) {
        that.show = false;
        that.getDetail(that.id);
      }
      console.log(data);
    });
  },
  methods: {
    ...mapActions(["showAuthModal"]),
    change(index) {
      this.current = index;
      this.cate_id = this.list[index].cate_id;
      this.getDetail();
    },
    getDetail(id) {
      this.$new_http("finance.teachDetail", {
        id: this.id,
        cate_id: this.cate_id,
      }).then((res) => {
        this.detajs = res.data.teach;
        this.list = res.data.cate;
        this.jingji_list = res.data.jingji_list;
        this.coursedata = res.data.course;
        this.activeList = res.data.act ? [res.data.act] : [];
        console.log(this.activeList, 33);
      });
    },
    // getClassList() {
    // 	this.$new_http("finance.teachDetail", {
    // 		id: this.id,
    // 		cate_id: this.cate_id,
    // 	}).then((res) => {
    // 		console.log(res.data, 888);
    // 	});
    // },
    handleDetail(val) {
      console.log(this.isLogin);
      if (this.isLogin) {
        if (val.is_buy == "0") {
          uni.navigateTo({
            url: "/pages/finance/detail?id=" + val.id + "&cId=" + this.cate_id,
          });
        } else {
          uni.navigateTo({
            url: "/pages/finance/playback?id=" + val.id,
          });
        }
      } else {
        this.$store.dispatch("showAuthModal");
      }
    },
    // 查看更多
    goMore(val) {
      // uni.navigateTo({
      //   url: "/pages/finance/more?type=" + val,
      // });
      // if (val == "2") {
      uni.navigateTo({
        url: "/pages/finance/activityList?type=" + this.detajs.id,
      });
      // }
    },
    handleActive(val) {
      uni.navigateTo({
        url: "/pages/finance/activityDetail?id=" + val.id,
      });
    },
    getStatus(id) {
      this.$new_http("finance.addClass", {
        item_id: id,
      }).then((res) => {
        console.log(res.data, 888);
        if (res.code == "1") {
          this.getDetail(this.id);
          return uni.showToast({
            title: "收藏成功",
            icon: "none",
            duration: 1000,
            mask: true,
          });
        }
      });
      this.collect = !this.collect;
    },
    // 成为会员
    gocome(index, val) {
      this.currId = index;
      this.selectval = val;
    },
    submit() {
      console.log(this.selectval);
      if (!this.selectval) {
        return uni.showToast({
          title: "请选择类型",
          icon: "none",
          duration: 1000,
          mask: true,
        });
      }
      uni.navigateTo({
        url:
          "/pages/finance/agentConfirm?price=" +
          this.selectval.price +
          "&id=" +
          this.id +
          "&cId=" +
          this.selectval.id,
      });
    },
    // 会员列表
    getvipList() {
      // 会员列表
      // this.show = true;
      // this.$new_http("finance.vipList").then((res) => {
      //   this.vipData = res.data;
      // });
	  if (this.isLogin) {
      uni.navigateTo({
        url:
          "/pages/finance/agentConfirm?price=" +
          this.detajs.price +
          "&id=" +
          this.id +
          "&cId=" +
          this.selectval.id,
      });
	  }else{
		  this.$store.dispatch("showAuthModal");
	  }
    },
  },
};
</script>

<style lang="scss">
.detailPage {
  background: #f7f7f7;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);

  .nav-wrap {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    width: 100%;
	  font-size: 32rpx;
  }

  .card {
    width: 100%;
    // height: 390rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding-top: 24rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    padding-bottom: 34rpx;
    margin-top: 2rpx;

    .cardTop {
      display: flex;

      .imgs {
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
      }

      .become {
        width: 100%;
        height: 84rpx;
        background: #ed861f;
        border-radius: 42rpx;
        font-family: PingFang;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 84rpx;
        margin-left: 30rpx;
        margin-top: 49rpx;
        text-align: center;

        .small {
          font-size: 24rpx;
          color: #ffffff;
          line-height: 84rpx;
          opacity: 0.8;
        }
      }
    }

    .introduce {
      margin-top: 34rpx;
      font-family: PingFang;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 44rpx;
      text-align: justify;
    }

    .cardright {
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      display: flex;

      .name {
        font-family: PingFang;
        font-weight: bold;
        font-size: 36rpx;
        color: #000000;
        margin-left: 31rpx;
      }

      .borline {
        width: 2rpx;
        height: 32rpx;
        background: #c7c7c7;
        margin-left: 37rpx;
        margin-top: 6rpx;
        margin-right: 37rpx;
      }
    }
  }

  .classification {
    margin-top: 20rpx;
    width: 100%;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    padding-right: 0;
    padding-left: 0;

    .tab {
      border-bottom: 2rpx #f0f0f0 solid;
    }

    .classificationTitle {
      display: flex;
      padding-left: 30rpx;
      font-family: PingFang;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;

      .leftline {
        width: 10rpx;
        height: 36rpx;
        background: #ed861f;
        border-radius: 5rpx;
        margin-right: 19rpx;
        margin-top: 4rpx;
      }
    }

    .financeTitle {
      display: flex;
      justify-content: space-between;
      font-family: PingFang;
      align-items: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      padding-left: 30rpx;
      margin-top: 51rpx;
      padding-right: 37rpx;

      .more {
        font-size: 24rpx;
        color: #999;

        .imgs {
          width: 12rpx;
          margin-left: 16rpx;
          vertical-align: middle;
          margin-top: -4rpx;
        }
      }
    }
  }

  .moreContent {
    padding: 0 30rpx;

    .moreList {
      width: 100%;
      padding: 30rpx 16rpx 30rpx 21rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 20rpx;
      display: flex;

      .imgs {
        width: 200rpx;
        height: 140rpx;
        border-radius: 8rpx;
      }

      .moreRight {
        width: 431rpx;
        margin-left: 28rpx;

        .name {
          font-family: PingFang;
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
          display: flex;
          justify-content: space-between;

          .nameright {
            font-family: PingFang;
            font-weight: 500;
            font-size: 26rpx;
            color: #666666;
            align-items: center;
            display: flex;

            .shoucang {
              width: 35rpx;
              margin-right: 23rpx;
              vertical-align: middle;
            }

            .suo {
              width: 22rpx;
              margin-left: 30rpx;
              margin-right: 20rpx;
            }
          }
        }

        .hite {
          margin-top: 0rpx;
          font-family: PingFang;
          font-weight: 500;
          font-size: 28rpx;
          color: #666666;
          //line-height: 42rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .empty {
    margin-top: 200rpx;
  }
}
// 盒子
.maskbox {
  width: 690rpx;
  // height: 990rpx;
  background: #ffffff;
  border-radius: 20rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .titlebox {
    position: relative;
  }

  .masktitle {
    font-family: PingFang;
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    text-align: center;
    margin-top: 61rpx;
  }

  .close {
    width: 25rpx;
    position: absolute;
    right: 48rpx;
    top: 5rpx;
  }

  .daili {
    font-family: PingFang;
    font-weight: bold;
    font-size: 30rpx;
    color: #000000;
    padding: 0 99rpx;
    margin-top: 56rpx;

    .dalibottom {
      display: flex;
      justify-content: space-between;
      margin-top: 36rpx;
    }

    .smalldl {
      width: 220rpx;
      height: 110rpx;
      background: #ffffff;
      border-radius: 12rpx;
      border: 2rpx solid #d5d5d5;
      font-weight: 400;
      font-size: 30rpx;
      color: #191919;
      text-align: center;
      line-height: 50rpx;
    }

    .activebr {
      border: 2rpx solid #ed861f;
    }
  }

  .sure {
    width: 360rpx;
    height: 76rpx;
    background: #ed861f;
    border-radius: 16rpx;
    text-align: center;
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 76rpx;
    margin: 70rpx auto 54rpx;
  }
}
// 活动预告
.activityYg {
  margin-top: 20rpx;
  width: 100%;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  padding-left: 0;
  .photoList {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    margin-top: 26rpx;
    .photoView {
      width: 70rpx;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 24rpx;
      color: #000000;
      margin-right: 26rpx;
      margin-bottom: 15rpx;

      .photoImg {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-bottom: 15rpx;
      }
      .photoName {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
    }
  }
  .classificationTitle {
    display: flex;
    padding-left: 30rpx;
    font-family: PingFang;
    font-weight: 500;
    font-size: 32rpx;
    color: #000000;
    justify-content: space-between;
    .leftline {
      width: 10rpx;
      height: 36rpx;
      background: #ed861f;
      border-radius: 5rpx;
      margin-right: 19rpx;
      margin-top: 4rpx;
    }
  }

  .more {
    font-size: 24rpx;
    color: #999;

    .imgs {
      width: 12rpx;
      margin-left: 16rpx;
      vertical-align: middle;
      margin-top: -4rpx;
    }
  }
  .moreList {
    width: 100%;
    padding: 30rpx 10rpx 30rpx 21rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin-top: 20rpx;
    display: flex;

    .imgs {
      width: 200rpx;
      height: 140rpx;
    }
    .moreRightTop {
      display: flex;
      justify-content: space-between;
      .name {
        font-family: PingFang;
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        //width: 213rpx;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      .time {
        font-size: 26rpx;
      }
    }
    .moreRight {
      width: 463rpx;
      margin-left: 28rpx;
      position: relative;
      .more {
        font-size: 28rpx;
        color: #999;
        position: absolute;
        right: 10rpx;
        bottom: -10rpx;
        .imgs {
          width: 13rpx;
          margin-left: 16rpx;
          vertical-align: middle;
          margin-top: -4rpx;
        }
      }
      .name {
        font-family: PingFang;
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
      }

      .hite {
        // margin-top: 20rpx;
        font-family: PingFang;
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
        line-height: 42rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
